<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="wangbo">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小测试</title>
</head>
<body>
    <!-- 挂载点 专门的渲染咱们的react dom -->
    <div id="app"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 操作html dom树 的库 -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 里边的语句用什么语法来解释 -->
    <script type="text/babel">
    // react 来创建一个元素, 元素的名字 string,元素的属性,{} js的对象,元素里边有其他的节点吗,[]
    const h1 =  React.createElement('h1',{key:'3'},'组合练习静态数据');
    const input =  React.createElement('input',{type:'text',name:''},null);
    const button =  React.createElement('button',{type:'button'},'按钮#4');
    const div =  React.createElement('div',{className:'myadd',key:'2'}, input,button);
    // 首先注销代码,尤其是,开发的时候,功能不确定,绝对不能删除代码
    // const List =  React.createElement('List',{id:'myid',key:'1'}, null);
    const arr = ['aa','bb','cc'] 
    const li1 =  React.createElement('li',null, 'aa');
    const li2 =  React.createElement('li',null, 'bb');
    const li3 =  React.createElement('li',null, 'cc');
    // const ul =  React.createElement('ul',{id:'myid',key:'1'}, li1,li2,li3);
    const ul =  <ul key='1' >{arr.map((val,index) => <li key={index} >{val} </li> )}</ul>
    ReactDOM.render([h1,div,ul],document.getElementById('app'))
    </script>
</body>
</html>